<template>
  <div class="scrollbar-flex-content">
    <div v-for="item in data" class="scrollbar-demo-item" style="width: 500px">
      <div
        class="title line"
        style="height: 30px; justify-content: space-between"
      >
        <span>{{ item.mode }}</span>
        <span
          @click="showDetail = !showDetail"
          style="text-decoration: underline"
        >
          *{{ showDetail ? "隐藏" : "显示" }}明细
        </span>
      </div>
      <div class="line">
        <span class="cell" style="width: 70px">时间</span>
        <span class="cell" style="width: 150px">方案名称</span>
        <span class="cell" style="width: 50px">数量</span>
        <span class="cell left" style="width: 300px">模块组合</span>
        <span class="cell" style="width: 70px">评价值</span>
        <span class="cell" style="width: 60px">备选</span>
      </div>
      <div
        v-for="i in moments.length"
        class="line"
        @click="handleLineClick(item, i)"
      >
        <span class="cell" style="width: 70px">
          {{ moments[i - 1] }}
        </span>
        <span class="cell" style="width: 150px">
          <span v-if="item.recommend[i - 1]">
            {{ item.recommend[i - 1].title }}
          </span>
          <span v-else>-</span>
        </span>
        <span class="cell" style="width: 50px">
          <span v-if="item.recommend[i - 1]">
            <span>{{ item.recommend[i - 1].areas.length }}扇</span>
          </span>

          <span v-else>-</span>
        </span>
        <span class="cell left" style="width: 300px">
          <span v-if="item.recommend[i - 1]">
            <div v-for="(seat, j) in item.recommend[i - 1].models">
              <span>{{ j + 1 }}: {{ seat.join(", ") }};</span>
              <span v-if="showDetail">
                <br />
                -> (FOQ:
                {{
                  Math.round(
                    item.recommend[i - 1].areaDetails[
                      item.recommend[i - 1].areas[j]
                    ].flowOriginalQuarter
                  )
                }}, FCQ:
                {{
                  Math.round(
                    item.recommend[i - 1].areaDetails[
                      item.recommend[i - 1].areas[j]
                    ].flowCalibratedQuarter
                  )
                }}, FOW:
                {{
                  Math.round(
                    item.recommend[i - 1].areaDetails[
                      item.recommend[i - 1].areas[j]
                    ].flowOriginalWhole
                  )
                }}, FCW:
                {{
                  Math.round(
                    item.recommend[i - 1].areaDetails[
                      item.recommend[i - 1].areas[j]
                    ].flowCalibratedWhole
                  )
                }}, LOQ:
                {{
                  Math.round(
                    item.recommend[i - 1].areaDetails[
                      item.recommend[i - 1].areas[j]
                    ].loadOriginalQuarter * 100
                  ) / 100
                }}, LCQ:
                {{
                  Math.round(
                    item.recommend[i - 1].areaDetails[
                      item.recommend[i - 1].areas[j]
                    ].loadCalibratedQuarter * 100
                  ) / 100
                }}, LOW:
                {{
                  Math.round(
                    item.recommend[i - 1].areaDetails[
                      item.recommend[i - 1].areas[j]
                    ].loadOriginalWhole * 100
                  ) / 100
                }}, LCW:
                {{
                  Math.round(
                    item.recommend[i - 1].areaDetails[
                      item.recommend[i - 1].areas[j]
                    ].loadCalibratedWhole * 100
                  ) / 100
                }});
              </span>
            </div>
          </span>
          <span v-else>-</span>
        </span>
        <span class="cell" style="width: 70px; text-align: center">
          <span v-if="item.recommend[i - 1]">
            <span>{{
              Math.round(
                item.recommend[i - 1].evaluation.evaluationCalibratedMixed * 100
              ) / 100
            }}</span>
            <span v-if="item.overloaded[i - 1]"><br />------<br />超负荷</span>
            <!-- <span v-for="subitem in item.content[i - 1]"
              >/{{
                Math.round(subitem.evaluation.evaluationCalibratedMixed * 100) /
                100
              }}</span
            > -->
            <!-- {{
              item.recommend[i - 1].evaluation.evaluationCalibratedQuarter
            }}/{{ item.recommend[i - 1].evaluation.evaluationCalibratedWhole }} -->
          </span>
          <span v-else>-</span>
        </span>
        <span class="cell" style="width: 60px; text-align: center">{{
          item.content[i - 1] ? item.content[i - 1].length : 0
        }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
  moments: {
    type: Array,
    required: true,
  },
});
const showDetail = ref(false);

const handleLineClick = (item, i) => {
  console.log("policyResult", {
    moment: props.moments[i - 1],
    mode: item.mode,
    recommend: item.recommend[i - 1],
    content: item.content[i - 1],
    secondary: item.secondary[i - 1],
    overloaded: item.overloaded[i - 1],
  });
};
</script>

<style scoped>
@import "./subviewStyles.css";
</style>
